<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>系统登录</title>
    <link rel="shortcut icon" th:href="@{/img/favicon.ico}">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <!--图标-->
    <link rel="stylesheet" type="text/css" th:href="@{css/font-awesome.min.css}">
    <!--布局框架-->
    <link rel="stylesheet" type="text/css" th:href="@{css/util.css}">
    <!--主要样式-->
    <link rel="stylesheet" type="text/css" th:href="@{css/main.css}">

    <link type="text/css" rel="stylesheet" th:href="@{/css/style.css}">
    <link type="text/css" rel="stylesheet" th:href="@{/css/technology.css}">
    <link type="text/css" rel="stylesheet" th:href="@{/plugins/fancybox/jquery.fancybox.min.css}">
    <link type="text/css" rel="stylesheet" th:href="@{/css/demo.css}">
    <script type="text/javascript" th:src="@{/plugins/jQuery/jquery.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/pace.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/lazyload.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/busuanzi-2.3.pure.min.js}"></script>
    <script type="text/javascript" th:src="@{/plugins/fancybox/jquery.fancybox.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/search.js}"></script>
    <script type="text/javascript" th:src="@{/js/technology.js}"></script>
</head>
<body>
<div id="container">
    <div id="wrap">
        <canvas id="canvas"></canvas>
        <div class="technology-body">
            <!-- 四个角标图形 -->
            <div class="technology-frame">
                <section>
                    <div></div>
                    <div></div>
                    <div></div>
                </section>
                <section>
                    <div></div>
                    <div></div>
                    <div></div>
                </section>
                <section>
                    <div></div>
                    <div></div>
                    <div></div>
                </section>
                <section>
                    <div></div>
                    <div></div>
                    <div></div>
                </section>
            </div>
            <!-- 旋转的轮盘 -->
            <section class="technology-circle">
                <div class="wrap">
                    <div class="inner">
                        <div class="middle">
                            <div class=""></div>
                        </div>
                    </div>
                </div>
            </section>
            <div class="container-login100">
                <div class="wrap-login100">
                    <div class="login100-pic js-tilt" data-tilt>
                        <img th:src="@{img/img-01.png}" alt="IMG" src="">
                    </div>
                    <form class="login100-form validate-form" th:action="@{/user/login}" method="post">
                        <span class="login100-form-title">会员登陆</span>
                        <div class="wrap-input100 validate-input">
                            <label>
                                <input class="input100" type="text" name="username" placeholder="用户名" autocomplete=“off”>
                            </label>
                            <span class="focus-input100"></span>
                            <span class="symbol-input100">
                                <i class="fa fa-envelope" aria-hidden="true"></i>
                            </span>
                        </div>
                        <div class="wrap-input100 validate-input">
                            <label>
                                <input class="input100" type="password" name="password" placeholder="密码" autocomplete=“off”>
                            </label>
                            <span class="focus-input100"></span>
                            <span class="symbol-input100">
                                <i class="fa fa-lock" aria-hidden="true"></i>
                            </span>
                        </div>
                        <div class="wrap-input100 validate-input">
                            <label>
                                <input class="input100" type="text" name="code" placeholder="请输入验证码" autocomplete=“off”>
                            </label>
                            <span class="focus-input100"></span>
                            <span class="symbol-input100">
                                <i class="fa fa-lock" aria-hidden="true"></i>
                            </span>
                        </div>
                        <img th:src="@{/user/getImage}" alt="" src="">
                        <div class="container-login100-form-btn">
                            <button class="login100-form-btn" type="submit">登陆</button>
                        </div>
                        <div class="text-center p-t-12">
                            <a class="txt2" href="javascript:">忘记密码？</a>
                        </div>
                        <div class="text-center p-t-25">
                            <a class="txt2" th:href="@{/register}">
                                还没有账号？立即注册
                                <i class="fa fa-long-arrow-right m-l-5" aria-hidden="true"></i>
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>